<template>
	<view class="login_view">
		<view class="fill"></view>
		<view class="default_head">
			<image src="../../static/logo2.png" class="img"></image>
		</view>
		<view class="data_form">
			<form @submit="login">
				<view class="form_input" :style="{border:IDClass}">
					<view class="input_left">
						<uni-icon type="contact" size="30" color="white"></uni-icon>
					</view>
					<view class="input_right">
						<input type="text" name="UserID" @blur="checkID" />
					</view>
				</view>
				<view class="form_input" :style="{border:KeyClass}">
					<view class="input_left">
						<uni-icon type="star-filled" size="30" color="white"></uni-icon>
					</view>
					<view class="input_right">
						<input type="password" name="UserKey" @blur="checkKey" />
					</view>
				</view>
				<view class="form_input">
					<button  formType="submit">登录</button>
				</view>
				<view class="account">
					<view class="regin" @click="reginID">注册账号</view>
					<view class="fotget" @click="forgetID">忘记密码</view>
				</view>
			</form>
			<view class="texts">其他登录方式</view>
			<view class="others">
				<view class="others_login">
					<uni-icon type="qq" size="30" color="white"></uni-icon>
				</view>
				<view class="others_login">
					<uni-icon type="weixin" size="30" color="white"></uni-icon>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import uniIcon from '@dcloudio/uni-ui/lib/uni-icon/uni-icon.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				id_right: false,
				key_right: false,
				isUse: true,
				IDClass:'white soild 1px',
				KeyClass:'white soild 1px'
			}
		},
		onLoad() {

		},
		methods: {
			reginID: function() {
				uni.navigateTo({
					url: "regin"
				})
			},
			forgetID: function() {
				uni.navigateTo({
					url: "forget"
				})
			},
			checkID: function(event) {
				let id = event.detail.value;
				let patt = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
				if (patt.test(id)) {
					console.log("ID格式正确");
					this.id_right = true;
					this.IDClass='white solid 1px';
				} else {
					console.log("id格式不正确");
					this.id_right = false;
					this.IDClass='#FF7256 solid 1px';
				}
			},
			checkKey: function(event) {
				let key = event.detail.value;
				let patt = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}$/;
				if (patt.test(key)) {
					console.log("key格式正确");
					this.key_right = true;
					this.KeyClass='white solid 1px';
				} else {
					console.log("key格式不正确");
					this.key_right = false;
					this.KeyClass='#FF7256 solid 1px';
				}
			},
			//登陆方法
			login: function(event) {
				if (this.id_right == false || this.key_right == false) {
					return false;
				} 
				uni.showLoading({
					title: '正在登录'
				});
				let formData = event.detail.value;
				// console.log("点击了登录" + JSON.stringify(formData));
				uni.request({
					url: 'https://app.menglinking.club/user',
					data: formData,
					dataType: 'json',
					method: 'GET',
					success: function(res) {
						console.log(JSON.stringify(res));
						uni.hideLoading();
						if (res.data.state == 200) {
							uni.showToast({
								title: '登录成功',
								duration: 2000
							});
							uni.setStorage({
									key: 'userInfo',
									data: res.data.data,
									success: function() {
										console.log("存入个人数据成功");
									}
								}),
								uni.setStorage({
									key: 'isLogin',
									data: true,
									success: function() {
										console.log("存入登录状态成功");
									}
								}),
								uni.reLaunch({
									url: '/pages/my/my'
								})
						} else {
							uni.showToast({
								title: res.data.msg,
								icon:'none',
								duration: 2000
							});
						}
					},
					fail: function() {
						uni.hideLoading();
						uni.showToast({
							title: '登录失败',
							duration: 1000
						});
					},
					complete: function() {
						uni.getStorage({
							key: 'userInfo',
							success: function(res) {
								console.log(res.data.userName)
							}
						})
					}
				})
			},
			//登录成功的方法回调
			login_success:function(data) {
				
			},
			login_fail:function(msg) {
				
			}
		}
	}
</script>

<style>
	@import url("login.css");
</style>
